import React, { Component } from 'react';
import { Form, Input, Button, Icon, message, Spin } from 'antd';
import storage from '../../utils/storage';
import FormItem from '../../components/FormItem/index';
import services from '../../services/api/index';
import { getEncryptCode, getCodeByKey } from '../../utils/utils';
import { connect } from 'react-redux';

import './index.less';
const logo = require(`src/public/images/logo.svg`);

@connect(mapStateToProps)
class Login extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      yfUrl: '',
    };
    this.formItems = [
      {
        name: 'username',
        options: {
          rules: [
            { required: true, message: '请输入用户名!' },
            { max: 128, message: '最长128个字符' },
            { pattern: /^[\u4E00-\u9FA5_a-zA-Z0-9]+$/, message: '限中英文数字下划线' },
          ],
        },
        component: <Input prefix={<Icon type='user' style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder='用户名' />,
      },
      {
        name: 'password',
        options: {
          rules: [
            { required: true, message: '请输入密码!' },
            { min: 6, message: '最小6个字符' },
            { max: 32, message: '最长32个字符' },
          ],
        },
        component: (
          <Input
            prefix={<Icon type='lock' style={{ color: 'rgba(0,0,0,.25)' }} />}
            type='password'
            placeholder='密码'
          />
        ),
      },
    ];
  }
  componentDidMount() {}

  handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        this.setState({ loading: true });
        try {
          services.user.login({ username: values.username, password: getEncryptCode(values.password) }).then((res) => {
            this.setState({ loading: false });
            if (res.code === 0) {
              storage.token = res.data.uuid;
              storage.userInfo = res.data;
              storage.dept = res.data.current_dept;
              this.props.history.push(res.data.default_url || '/');
            } else {
              message.error(res.msg);
            }
          });
        } catch (e) {
          message.error(e);
        }
      }
    });
  };

  render() {
    const logoSrc = this.props.skin.b_logo_url ? this.props.skin.b_logo_url : logo;
    console.log(this.props.skin.b_logo_url);
    return (
      <div className='login-cont'>
        <div className='login-area'>
          <Spin spinning={this.state.loading}>
            <div className='login-form'>
              <h4 className='login-title'>
                <img src={logoSrc} alt='腾讯云' />
              </h4>

              <Form onSubmit={() => false} className='login-form'>
                {this.formItems.map((item, key) => {
                  return <FormItem key={key} form={this.props.form} item={item} />;
                })}
                <Button type='primary' onClick={this.handleSubmit} className='login-form-button'>
                  登录
                </Button>
              </Form>
            </div>
          </Spin>
        </div>
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
    skin: {
      b_logo_url: state.skin.b_logo_url,
    },
  };
}

export default Form.create()(Login);
